<template>
  <a-form class="smart-query-form" v-privilege="'oa:enterprise:query'">
    <a-row class="smart-query-form-row">
      <a-form-item label="应用名称" class="smart-query-form-item">
        <a-input-search
          style="width: 300px"
          v-model:value="queryForm.appName"
          placeholder="请输入应用名称"
          enter-button="选择"
          @search="openAppTable"
        />
      </a-form-item>
      <a-form-item label="角色名称" class="smart-query-form-item">
        <a-input style="width: 300px" v-model:value="queryForm.roleName" placeholder="请输入角色名称" />
      </a-form-item>

      <a-form-item class="smart-query-form-item smart-margin-left10">
        <a-button-group>
          <a-button type="primary" @click="onSearch">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-button-group>
      </a-form-item>
    </a-row>
  </a-form>
  <a-card>
    <a-row>
      <a-col :span="24">
        <a-button type="primary" @click="save"> 保存 </a-button>
      </a-col>
      <a-col :span="12">
        <a-table
          size="small"
          rowKey="id"
          :dataSource="tableData"
          :columns="columns"
          :pagination="false"
          :loading="tableLoading"
          bordered
          :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
        >
          <template #bodyCell="{ column, record, text, index }">
            <template v-if="column.dataIndex === 'index'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'category'">
              {{ record.category == 'static' ? '静态' : '动态' }}
            </template>
          </template>
        </a-table>

        <!-- <a-menu v-model:selectedKeys="current" mode="inline" @click="menuClick">
          <a-menu-item v-for="(item, index) in tableData" :key="item.id">
            <template #icon>
              <mail-outlined />
            </template>
            {{ item.roleName }}
          </a-menu-item>
        </a-menu> -->
      </a-col>
      <a-col :span="12">
        <a-table
          size="small"
          rowKey="id"
          :dataSource="appTableData"
          :columns="appColumns"
          :pagination="false"
          :loading="appTableLoading"
          bordered
          :scroll="{ y: 450 }"
          :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
        >
          <template #bodyCell="{ column, record, text, index }">
            <template v-if="column.dataIndex === 'index'">
              {{ index + 1 }}
            </template>
            
            <template v-if="column.dataIndex === 'iconBase64'">
              <img :src="record.iconBase64" alt="" style="width: 40px" />
            </template>
          </template>
        </a-table>
      </a-col>
    </a-row>
  </a-card>
  <AppTable ref="appTableRef" v-model:value="appSelectedRowKeyList" @change="appTableChange"></AppTable>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import AppTable from '../resources/components/app-table.vue';
import { privilegesApi } from '/@/api/permissions/privileges';
import { applicationManagementApi } from '/@/api/system/applicationManagement-api';
import { message } from 'ant-design-vue';

const queryFormState = {
  pageNumber: 1,
  pageSize: 100,
  searchCount: true,
  appName: '',
  roleName: '',
  appId: '',
};
const roleId = ref('');
const queryForm = reactive({ ...queryFormState });
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0);
const appTableData = ref([]);
const appTotal = ref(0);
const appTableLoading = ref(false);
const current = ref([0]);
const columns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    width: 50,
    align: 'center',
  },
  {
    title: '角色名称',
    dataIndex: 'roleName',
    width: 100,
    ellipsis: true,
  },
  {
    title: '类型',
    dataIndex: 'category',
    width: 100,
    ellipsis: true,
  },
]);
const appColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    width: 50,
    align: 'center',
  },
  {
    title: '图标',
    dataIndex: 'iconBase64',
  },
  {
    title: '应用名称',
    dataIndex: 'appName',
  },
]);
// 查询
function onSearch() {
  queryForm.pageNumber = 1;
  ajaxQuery();
}
// 重置查询
function resetQuery() {
  searchDate.value = [];
  Object.assign(queryForm, queryFormState);
  ajaxQuery();
}
const appTableRef = ref(null);
const selectedRowKeyList = ref([]);
function onSelectChange(selectedRowKeys) {
  selectedRowKeyList.value = selectedRowKeys;
}
// 列表数据获取
async function ajaxQuery() {
  try {
    tableLoading.value = true;
    let responseModel = await privilegesApi.getList(queryForm);
    const list = responseModel.data.rows;
    total.value = responseModel.data.records;
    tableData.value = list;
    roleId.value = '';
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}
// 列表数据获取
async function appAjaxQuery() {
  try {
    appTableLoading.value = true;
    let responseModel = await applicationManagementApi.getFetch(queryForm);
    const list = responseModel.data.rows.map((i, index) => {
      i['key'] = index;
      return i;
    });
    appTotal.value = responseModel.data.records;
    appTableData.value = list;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    appTableLoading.value = false;
  }
}
function openAppTable() {
  appTableRef.value.showModal();
}
const appSelectedRowKeyList = ref([]);
function appTableChange(records) {
  queryForm.appName = appSelectedRowKeyList.value[0];
  queryForm.appId = records[0].id;
  appTableData.value = records;
}
function menuClick(item) {
  roleId.value = item.key;

}
function save() {
  if (queryForm.appId && roleId.value) {
    privilegesApi
      .update({
        appId: queryForm.appId,
        resourceId: queryForm.appId,
        roleId: roleId.value,
      })
      .then((res) => {
        if (res.code === 0) {
          message.success('操作成功!');
        }
      });
  }
}
onMounted(() => {
  ajaxQuery();
  // appAjaxQuery();
});
</script>
<style scoped></style>
